<template>
    <div class="detail-container" v-loading="loading">
        <el-card class="box-card" style="padding:20px;width:840px;min-height:1188px;margin:0 auto">
            <div id="template-div">
                <table cellspacing="0" cellpadding="0" border="0" width="100%" class="fistTable">
                    <tr class="th">
                        <Td style="width:190px;border-bottom:0">项目</Td>
                        <Td style="border-bottom:0">标准</Td>
                        <Td style="padding:0 20px;width:150px;border-bottom:0">评分</Td>
                    </tr>
                </table>
                <table cellspacing="0" cellpadding="0" border="0" width="100%" class="fistTable">
                    <tr v-for="item in data">
                        <Td align="center" valign="middle" style="width:100px">{{item.itemName}}</Td>
                        <Td colspan="2" style="padding:0">
                            <table cellspacing="0" cellpadding="0" border="0" width="100%">
                                <tr v-for="(c,ii) in item.subItems">
                                    <!--评分-->
                                    <template v-if="c.itemType == 'other_score'">
                                        <td valign="middle" align="center" style="width:90px"
                                            :style="{'border-bottom': ii == item.subItems.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}"
                                            v-if="c.itemValues.length > 0">{{c.itemName}}</td>
                                        <td valign="middle" colspan="2"
                                            :style="{'border-bottom': ii == item.subItems.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}"
                                            style="padding:0 20px;font-weight: bold"
                                            v-else>{{c.itemName}}</td>
                                        <td  :style="{'border-bottom': ii == item.subItems.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}" style="padding:0" v-if="c.itemValues.length > 0">
                                            <div v-for="(cc,iii) in c.itemValues" class="sub-item-div" :style="{'border-top':iii == 0 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}">{{cc.name}}</div>
                                        </td>
                                        <td style="padding:0 20px;width:150px;border-right:0" :style="{'border-bottom': ii == item.subItems.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}">
                                            <el-slider v-model="c.itemNum" :max="c.itemScore" :step="0.1"></el-slider>
                                        </td>
                                    </template>
                                    <!--自评-->
                                    <template v-else>
                                        <td valign="middle" align="center" style="width:90px"
                                            :style="{'border-bottom': ii == item.subItems.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}">{{c.itemName}}</td>
                                        <td  :style="{'border-bottom': ii == item.subItems.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5'}" colspan="2" style="border-right:0">
                                              <div class="sub-item-div"></div>
                                        </td>
                                    </template>
                                </tr>
                            </table>
                        </Td>

                    </tr>
                </table>

            </div>
        </el-card>
        <div style="margin-top:40px;text-align: center">
            <el-button  style="width:150px;" @click="goBlack">返回</el-button>
        </div>



    </div>
</template>
<script>
    import { mapGetters } from 'vuex'
    import store from '@/store'
    import {itemList} from '@/api/partner'
    import "@/utils/jQuery.print"
    export default {
        name: "customerDetail",
        data(){
            return{
                roles:store.getters.roles ? store.getters.roles : [],
                loading:false,
                templateId:this.$route.query.templateId,
                type:this.$route.query.type,
                data:[],
                btnLoading:false,
            }
        },
        computed: {
            ...mapGetters([
                'name',
                'mobile',
                'userId'
            ]),
        },
        created() {
            this.getItemList();
        },
        filters: {

        },
        methods:{
            goBlack(){
                this.$router.go(-1)
            },
            //获取项目列表
            getItemList(){
                itemList({templateId:this.templateId}).then((res)=>{
                    this.data = []
                     res.forEach((el)=>{
                         let c = JSON.parse(JSON.stringify(el));
                         c.itemNum = 0;
                         this.data.push(c)
                     })
                })
            },
        }
    }
</script>

<style lang="scss">
    .detail-container {
        width: 90%;
        padding: 20px 20px 20px 20px;
        margin: 20px auto;
    }
    #template-div{
        table.fistTable{
            border-left:1px solid #EBEEF5;
            border-top: 1px solid #EBEEF5;
        }
        table{
            td{
                border-right:1px solid #EBEEF5;
                border-bottom: 1px solid #EBEEF5;
                font-size:14px;
                padding:8px 0;
                line-height: 20px;
                color:#909399
            }
            .th{
                text-align: center;
                font-weight: bold;
                background: #f5f7fa;
            }
            .sub-item-div{
                padding:8px;

            }
        }
    }
</style>
